<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>详情界面</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../res/layui/css/layui.css">
    <link rel="stylesheet" href="../../res/css/global.css">
    <script src="../../shandong3d/examples/js/jquery.js"></script>
<style>
    .detail-content{
        height: 20px;
        padding: 10px;
        font-size: 18px;
    }
    .intro-content{
        overflow: auto;
        height: 300px;
        border: 1px solid #e1dada;
        margin: 10px 10px;
        font-size: 17px;
        padding: 10px;
    }
    .intro-pic{
        padding: 8px;
    }
    ::-webkit-scrollbar {/*滚动条整体样式*/

        width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/

        height: 1px;

    }

    ::-webkit-scrollbar-thumb {/*滚动条里面小方块*/

        border-radius: 6px;

        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        background: #d3d3d3;

    }

    ::-webkit-scrollbar-track {/*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);

        border-radius: 10px;

        background: #EDEDED;

    }
</style>

</head>

<body>

<div class="layui-container">
    <div class="fly-panel detail-box">
        <table border="0" style="background-color: #eeeeee;width: 100%;height: 550px">
            <tr>
                <td colspan="2" style="padding: 5px 30px">
                    <h1 id="introTitle">山東省非物質文化遺產</h1>
                </td>
            </tr>
            <tr>
                <td rowspan="2" style="width:25%;vertical-align:top;padding: 5px">
                    <p class="intro-pic">
                        <img id="introPic1" style="width: 100%" esrc="../../res/images/fly.jpg" alt="山东省非遗网">
                    </p>
                    <p class="intro-pic">
                        <img id="introPic2" style="width: 100%" src="../../res/images/fly.jpg" alt="山东省非遗网">
                    </p>
                </td>
                <td rowspan="5" style="height:200px;width:75%;vertical-align:top;">
                   <p class="detail-content" >
                       <span>非遗类别：</span><span id="introType">这里是类别</span>
                   </p>
                    <p class="detail-content">
                        <span>非遗地点：</span><span id="introProvince">这里是地點</span>
                    </p>
                    <p class="detail-content" >
                        <span>非遗介绍：</span>
                    <p class="intro-content" id="introContent">
                    这里是介紹
                   </p>
                    </p>
                </td>
            </tr>
        </table>
    </div>
</div>


</body>


<script src="../../res/layui/layui.js"></script>
<!--
<script>
    layui.cache.page = 'jie';
    layui.cache.user = {
        username: '游客'
        , uid: -1
        , avatar: '../../res/images/avatar/00.jpg'
        , experience: 83
        , sex: '男'
    };
    layui.config({
        version: "3.0.0"
        , base: '../../res/mods/'
    }).extend({
        fly: 'index'
    }).use(['fly', 'face'], function () {
        var $ = layui.$
            , fly = layui.fly;

    });

</script>
-->


<script>
    $(document).ready(function () {
        $('#introTitle')[0].innerText = parent.detailData.title;
        $('#introType')[0].innerText = parent.detailData.type;
        $('#introPic1')[0].src = "/image/" + parent.detailData.path1;
        $('#introPic2')[0].src = "/image/" + parent.detailData.path2;
        $('#introProvince')[0].innerText = parent.detailData.province;
        $('#introContent')[0].innerText = parent.detailData.content;


    });
</script>
</html>